<template>
    <view class="bodys">
        <view class="home">
            <view class="top-box" >
                <view v-for="item,index in topList" :key="index" @click="onChangeDate(index)" class="tops" :class="{'bgc':index == selectId}" >
                    <view class="tops-title" >
                        {{item.name}}
                        <span style="margin-left: 10rpx;" v-if="index == 0">{{ time }}</span>
                    </view>
                    <view class="tops-sub" :style="{'color': index == selectId ? '#fc4944' : ''}" >
                        {{ index == 0 ? topList[0].label : topList[1].label }}
                    </view>
                </view>
            </view>
            <view class="list" >
                <scroll-view 
                v-if="goodsList.length > 0 "
                scroll-y="true" @scrolltolower="onBottom" style="height: 100vh;padding-top: 130rpx;">
                    <view class="list-box" v-for="item,index in goodsList" :key="index">
                    <view class="left" @click="buyOnes(item.id)" >
                        <image class="ljshop-image" :src="item.img" mode="heightFix">
                        </image>
                    </view>
                    <view class="right" >
                        <view class="sub" >
                            超值低价
                        </view>
                        <view class="title" >
                            {{ item.name }}
                        </view>
                        <view class="pross-box" >
                            <view class="pross">
                            <view class="line" :style="{width: (300 * (item.percent / 100)) + 'rpx'}" >
                                {{ item.percent }}%
                            </view>
                        </view>
                        <view class="pross-text" >
                            已抢{{ item.newSales }}件
                        </view>
                        </view>
                        <view class="time-box">
                            {{ item.endDate.slice(item.endDate.length -5 ,item.endDate.length) }}
                        </view>
                        <view class="bottom" >
                            <view class="price" >
                                <view class="ms" >
                                    秒杀价￥
                                    <span class="bigPri">{{ item.newPrice }}</span>
                                </view>
                                <view class="change" >
                                    即将恢复{{ item.price }}元
                                </view>
                            </view>
                            <view class="buy" @click="onBuy(item.percent,item.status,item.id)" :class="{'notBuy': item.status == 2 || item.status == 3}" >
                                {{ item.percent == 100 ? '已结束' : ['立即抢','等待抢购','已结束'][item.status - 1] }}
                            </view>
                        </view>
                    </view>
                </view>
                </scroll-view>
                <view v-else class="" style="margin-top: 20vh;">
                    <ljshop-empty 
                    image="https://image.hzwltb69.com/app/date/2023/notOrder.png"
                    tipText="暂无商品">
		           </ljshop-empty>
                </view>
            </view>

        </view>
    </view>
</template>
<script>
export default{
    data(){
        return{
            topList:[
                {
                    name:"距结束",
                    label: '',
                    id: 0
                },
                {
                    name:"0点开抢",
                    label: '',
                    id: 1
                }
            ],
            selectId: 0,
            time: '00:00:00',
            goodsList: [],
            onEnd: false,
            intervall: null,
            page: 1
        }
    },
    created() {
        // this.getTime();
        this.intervall = setInterval(() => {
            this.getTime();
        }, 1000);
        this.getRush()
    },
    onUnload(){
        clearInterval(this.intervall);
    },
    methods:{
        onBuy(p,e,i){
            if(p == 100 || e == 3 ){
                uni.showToast({
                    title: '当前商品抢购已结束',
                    icon: 'none'
                })
                return;
            }
            if(e == 2){
                uni.showToast({
                    title: '当前商品还未开始抢购',
                    icon: 'none'
                })
                return;
            }
            this.$Router.push({
                path: '/pages/goods/rushbuy/rushdetail',
                query: {
                    id: i
                }
            })
        },
        onBottom(){
        if(this.onEnd) return;
        this.page++;
        this.getList(this.selectId);
        },
        buyOnes(e){
            this.$Router.push({
                path: '/pages/goods/detail',
                query: {
                    id: e
                }
            })
        },
        onChangeDate(e){
            if(this.selectId == e) return;
            this.selectId = e;
            this.page = 1;
            this.onEnd = false;
            this.goodsList = [];
            this.getList(e);
        },
        getRush(){
            this.$http('goods.getRush',{})
            .then(res=>{
                this.topList[0].label = res.data[0].label;
                this.topList[0].date = res.data[0].date;
                this.topList[1].label = res.data[1].label;
                this.topList[1].date = res.data[1].date;
                this.getList(0);
            })
        },
        getList(e){
            this.$http('goods.getRushList',{
                page: this.page,
                size: 10,
                curDate: this.topList[e].date,
				isHome:false
            })
            .then(res=>{
                res.data.list.length == 0 ? this.onEnd = true : '';
                this.goodsList.length == 0 ?
                 this.goodsList = res.data.list : []
                 this.goodsList =  this.goodsList.concat(res.data.list)
            })
        },
        getTime(){
        let date = new Date();
        let now = date.getTime();
        let tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        tomorrow.setHours(0, 0, 0, 0);
        let time = tomorrow.getTime() - now;
        let h = Math.floor(time / 60 / 60 / 1000);
        let m = Math.floor((time % (60 * 60 * 1000)) / (60 * 1000));
        let s = Math.floor(((time % (60 * 60 * 1000)) % (60 * 1000)) / 1000);
        let times = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
        this.time = times;
    }
    }
}
</script>
<style lang="scss" scoped>
.bodys{
    height: 100vh;
    background-color: #f42f3f;
    .home{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #fff;
        // border-top-right-radius: 40rpx;
        // border-top-left-radius: 40rpx;
        overflow: scroll;
        .top-box{
            position: fixed;
            display: flex;
            background-color: #f6f6f6;
            width: 100%;
            height: 130rpx;
            z-index: 10;
            // border-top-right-radius: 40rpx;
            // border-top-left-radius: 40rpx;
            overflow: hidden;
            .tops{
                flex: 1;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                transition: all .1s;
                border-radius: 20rpx;
                .tops-title{
                    font-weight: 600;
                }
                .tops-sub{
                    font-size: 20rpx;
                    color: #8f8f8f;
                }
            }
        }
        .list{
            padding: 0 20rpx 0 20rpx;
            .list-box{
                width: 100%;
                height: 280rpx;
                // background-color: #f6f6f6;
                border-radius: 20rpx;
                margin-bottom: 20rpx;
                display: flex;
                margin-top: 30rpx;
            }
            .left{
                width: 260rpx;
                height: 100%;
                border-radius: 20rpx;
                image{
                    width: 100%;
                    height: 100%;
                    border-radius: 20rpx;
                }
            }
            .right{
                display: flex;
                flex-direction: column;
                margin-left: 20rpx;
                .sub{
                    background-color: #f42f3f;
                    color: #fff;
                    font-size: 20rpx;
                    border-radius: 8rpx;
                    width: 90rpx;
                    text-align: center;
                    // #ifdef APP-PLUS || H5
                    width: 100rpx;
                    padding: 5rpx 5rpx;
                    // #endif
                }
                .title{
                    width: 430rpx;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    font-size: 32rpx;
                    font-weight: 600;
                    margin-top: 10rpx;
                    // margin-bottom: 10rpx;
                }
                .pross-box{
                    display: flex;
                    margin-top: 10rpx;
                    .pross-text{
                        font-size: 24rpx;
                        color: #8f8f8f;
                        margin-left: 25rpx;
                    }
                }
                .pross{
                    width: 300rpx;
                    height: 35rpx;
                    background: #fdecf2;
                    border-radius: 10rpx;
                    position: relative;
                    .line{
                        position: absolute;
                        // width: 120rpx;
                        height: 100%;
                        background-color: #f42f3f;
                        border-radius: 10rpx;
                        font-size: 20rpx;
                        line-height: 35rpx;
                        color: #fff;
                        padding-left: 10rpx;
                    }
                    .line::after{
                        content: '';
                        position: absolute;
                        width: 45rpx;
                        height: 45rpx;
                        border-radius: 10rpx;
                        background: url('https://image.hzwltb69.com/app/date/2023/rushfire.png') no-repeat;
                        background-size: 100%;
                        top: -9rpx;
                        right: -18rpx;
                    }
                }
                .bottom{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 25rpx;
                    // #ifdef APP-PLUS || H5
                    margin-top: 15rpx;
                    // #endif
                    .price{
                        display: flex;
                        flex-direction: column;
                        .ms{
                            color: #f42f3f;
                            font-size: 25rpx;
                            .bigPri{
                                font-size: 40rpx;
                                font-weight: 600;
                            }
                        }
                        .change{
                            color: #8f8f8f;
                            font-size: 20rpx;
                        }
                    }
                    .buy{
                        color: #fff;
                        background-color: #fc4944;
                        height: 60rpx;
                        font-size: 26rpx;
                        min-width: 130rpx;
                        line-height: 60rpx;
                        text-align: center;
                        border-radius: 40rpx;
                        // padding: 0 20rpx;
                    }
                }
            }
        }
    }
}
.bgc{
    background-color: #ffffff;
    color: #f14b49;
}
.notBuy{
    background-color: #8f8f8f !important;
}
.time-box{
    font-size: 24rpx;
    width: 100rpx;
    background-color: #f8f2e1;
    color: #e4853c;
    text-align: center;
    border-radius: 15rpx;
    margin-top: 25rpx;
}
</style>